<template>
	<paneContainer>
		<template #title>基本设置</template>
		<paneGroup label="默认颜色模式">
			<el-radio-group v-model="value.defaultColorMode">
				<el-radio label="follow-system">跟随系统</el-radio>
				<el-radio label="light">明亮</el-radio>
				<el-radio label="dark">暗色</el-radio>
			</el-radio-group>
		</paneGroup>
	</paneContainer>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import { AnyKey } from '@p/utils';
import { ConfigFile } from '@p/main-config-file';
import paneGroup from './template/paneGroup.vue';
import paneContainer from './template/paneContainer.vue';

const props = defineProps({
	value: Object,
});

const emits = defineEmits(['update:value']);

let value: ConfigFile['base'] = reactive(JSON.parse(JSON.stringify(props.value)));

watch(value, () => {
	emits('update:value', value);
});

watch(
	() => props.value,
	() => {
		for (const key in props.value) {
			(value as AnyKey<any>)[key] = props.value[key];
		}
	},
	{ deep: true }
);
</script>
